<template>
  <a-modal title="api推送" :width="720" :visible="visible" @ok="handleModalConfirm" @cancel="handleModalCancel"
    :confirm-loading="modalLoading">
    <div v-if="plainOptions.length" class="checkbox-wrap">
      <div class="checkbox-list">
        <!-- {{ plainOptions }} -->
        <a-radio-group v-model="productId">
          <a-radio :style="radioStyle" v-for="(item, index) in plainOptions" :key="index" :value="item.productId">{{
            item.productName
            }}</a-radio>
        </a-radio-group>
      </div>
    </div>
    <a-empty v-else />
  </a-modal>
</template>

<script>
import * as Ajax from '@/api/institution';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    id: {
      type: String,
      default: '',
    },
    userid: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      modalLoading: false,
      checkAll: false,
      indeterminate: true,
      checkedList: [],
      plainOptions: [],
      list: [],
      productId: ''
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        // this.handleModalCancel();
      } else {
        const params = {
          clueId: this.id,
        };
        Ajax.getClueResult1(params).then(({ success, data }) => {
          if (success) {
            // console.log(data)
            data.forEach(item => {
              item.isbool = false
            })
            this.plainOptions = data;
            // console.log('我的值', this.plainOptions)
            // this.onChange([]);
          }
        });
      }
    },
  },
  methods: {
    onChange(checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
      this.checkAll = checkedList.length === this.plainOptions.length;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? this.plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
    handleModalConfirm() {
      this.modalLoading = true;
      // const loanIdList = this.list.filter((it) => this.checkedList.includes(it.insuranceProductsName));
      const params = {
        userId: this.userid,
        clueId: this.id,
        loanId: this.productId
      };
      Ajax.pullClueResult1(params).then(({ success }) => {
        if (success) {
          this.$message.success('推送成功');
          this.$emit('success');
          this.handleModalCancel();
        }
      }).finally(() => {
        this.modalLoading = false;
      });
    },
    handleModalCancel() {
      this.checkAll = false;
      this.indeterminate = true;
      this.checkedList = [];
      this.plainOptions = [];
      this.list = [];
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.table-wrap {
  margin-top: 20px;
  padding-top: 16px;
}

.btn-gruop {
  display: flex;
  justify-content: flex-end;
}

.checkbox-wrap {
  padding: 20px;
  border: 1px solid #e8e8e8;

  .line {
    width: 100%;
    height: 1px;
    background-color: #e8e8e8;
    margin: 16px 0;
  }

  .checkbox-list {
    max-height: 561px;
    overflow-y: auto;
  }
}

::v-deep .ant-checkbox-group-item {
  display: block;
  margin-right: 0;

  &:not(:last-child) {
    margin-bottom: 6px;
  }
}
</style>
